<template>
  <div class="my-info-container">
    <div class="info-right">
      <el-form ref="form" size="small" :model="user" label-width="80px">
        <el-form-item style="margin-left: -220px; color: rgb(188 185 185)">
          ID：{{ user.id }}
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="user.name" disabled />
        </el-form-item>
        <el-form-item label="密码">
          <el-button type="primary" @click="toUpdatePwd">点我修改</el-button>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="user.nickname" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="user.userEmail" />
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="user.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button style="width: 100%" type="primary" @click="update"
            >确认修改</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <!-- 修改密码 -->
    <el-dialog title="修改密码" :visible.sync="updatePwdDialog" width="30%">
      <pwd-update v-if="updatePwdDialog" @closeDialog="closeDialog" />
    </el-dialog>
    <!-- 修改密码结束 -->
  </div>
</template>

<script>
import { update, getInfo } from "@/api/customer";
import pwdUpdate from "./pwd-update.vue";


export default {
  components: { pwdUpdate },
  data() {
    return {
      // user: this.$store.getters.user,
      // 控制修改密码弹窗
      updatePwdDialog: false,
      user: "",
    };
  },
  created() {
    this.getInfo();
  },
  methods: {
    // 查询个人信息
    // 修改个人信息
    getInfo() {
      getInfo().then((res) => {
        this.user = res.data
      });
    },
    // 修改密码
    toUpdatePwd() {
      this.updatePwdDialog = true;
    },
    // 关闭弹窗
    closeDialog() {
      this.updatePwdDialog = false;
    },
    // 修改个人信息
    update() {
      update(this.user).then((res) => {
        this.$message.success(res.msg);
      });
    },
  },
};
</script>

<style src="./user-info.css" scoped></style>